<template>
  <u-modal :show="isShowModal" :closeOnClickOverlay="true" :showConfirmButton="false">
    <view class="flex-col section_6" slot="default">
      <view class="flex-row justify-between items-center self-stretch group">
        <text class="font_2 text_3">{{ $t('drama.participationTip') }}</text>
        <u-icon @click="handleCloseModal" name="close" color="#ffffff" class="close-icon"></u-icon>
      </view>
      <view class="flex-col items-start self-stretch group_2">
        <text class="font_3 text_4">{{ $t('drama.selectTaskDays') }}</text>
        <view class="flex-col justify-start items-center text-wrapper mt-13"><text class="font text_5">30</text></view>
      </view>
      <view class="flex-col items-start self-stretch group_3">
        <text class="font_3 text_6">Cost:</text>
        <text class="font text_7 mt-21">5U + 13.67SDT</text>
      </view>
      <view class="flex-col justify-start items-center self-center text-wrapper_2" @click="handleJoinNow">
        <text class="font_2 text_8">{{$t('drama.joinNow')}}</text>
      </view>
    </view>
  </u-modal>
</template>

<script>
export default {
  props: {
    isShowModal: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleCloseModal() {
      this.$emit('close');
    },
    handleJoinNow() {
      this.$emit('join');
    }
  }
};
</script>

<style lang="scss" scoped>
.select-text {
  color: #00f6ff;
  background-color: #00f6ff33 !important;
  border-color: #00f6ff;
}
/deep/ .u-popup__content {
  padding-top: unset;
  background-color: unset;
  color: #ffffff;

  .u-modal {
    // background-image: url('@/static/common/b-modal.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 22rem;
  }

  .u-line {
    display: none;
  }
}

.close-icon {
  position: absolute;
  right: 3rem;
}

.mt-13 {
  margin-top: 26rpx;
}

.mt-21 {
  margin-top: 42rpx;
}

.section_6 {
  margin: 0 32rpx;
  padding: 40rpx 32rpx 40rpx 48rpx;
  border-radius: 48rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  background-image: url('@/static/common/b-modal.png');

  .group {
    justify-content: center;

    .text_3 {
      line-height: 29.5rpx;
    }

    .image_6 {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .group_2 {
    margin-top: 60rpx;

    .text_4 {
      font-size: 28rpx;
      line-height: 25.92rpx;
    }

    .text-wrapper {
      padding: 16rpx 0;
      background-color: #ffffff33;
      border-radius: 8rpx;
      width: 146rpx;
      border-left: solid 1rpx #ffffff4d;
      border-right: solid 1rpx #ffffff4d;
      border-top: solid 1rpx #ffffff4d;
      border-bottom: solid 1rpx #ffffff4d;

      .text_5 {
        font-size: 24rpx;
      }
    }
  }

  .group_3 {
    margin-top: 56rpx;
    padding: 0 4rpx;

    .text_6 {
      font-size: 28rpx;
      line-height: 20.78rpx;
    }

    .text_7 {
      font-size: 24rpx;
    }
  }

  .font_3 {
    font-size: 26rpx;
    font-family: PingFang SC;
    color: #ffffffb3;
  }

  .font {
    font-size: 26rpx;
    font-family: PingFang SC;
    line-height: 17.8rpx;
    color: #ffffff;
  }

  .text-wrapper_2 {
    margin-top: 72rpx;
    padding: 28rpx 0;
    background-image: linear-gradient(121.2deg, #00f6ff 0%, #8312f2 69.5%, #fb97ad 100%);
    border-radius: 24rpx;
    width: 320rpx;

    .text_8 {
      line-height: 23.62rpx;
    }
  }

  .font_2 {
    font-size: 32rpx;
    font-family: PingFang SC;
    line-height: 24.08rpx;
    color: #ffffff;
  }
}
</style>
